<template >
    <div>
      <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight">
      <div style="background:red;height:100px">center</div>
    </v-touch>
      <!-- <el-button type="success">成功按钮</el-button>
      <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949">
    </el-switch>
    <el-button type="text" @click="open">点击打开 Message Box</el-button>
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button> -->
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
import VueTouch from 'vue-touch'
// var VueTouch = require('vue-touch')
Vue.use(VueTouch, { name: 'v-touch' })
export default ({
  data () {
    return {
      value: true
    }
  },
  methods: {
    open () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onSwipeLeft () {
      console.log('left')
    },
    onSwipeRight () {
      console.log('right')
    }
  }
})
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
html{
  height: 100%
}
</style>
